<template>
    <div class="func-auth">
        <div class="search-box">
            <div class="tips" style="display:inline-block;">
                设置角色对应的功能操作、应用管理、后台管理权限。
            </div>
            <div class="btn-wrap">
                <el-checkbox v-model="allCheck" @change="allCheckChange"
                    :disabled="!treeNode.id || treeNode.nodeType == 'cate' || treeNode.typeCode == 'SUPER_MANAGER'">
                    全选
                </el-checkbox>
            </div>
        </div>
        <div class="table-box">
            <el-table v-loading="loading2" height="100%" :data="tableData" border :show-header="false">
                <el-table-column label="系统" prop="name" width="200px" align="left">
                    <template slot-scope="scope">
                        <div class="auth-wrap">
                            <el-checkbox :indeterminate="scope.row.indeterminate"
                                :disabled="treeNode.typeCode == 'SUPER_MANAGER'" v-model="scope.row.isCheck"
                                @change="(val) => moduleCheckChange(val, scope.row)">
                                {{ scope.row.resrName }}
                            </el-checkbox>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="模块" min-width="200px" align="left">
                    <template slot-scope="scope">
                        <div class="auth-wrap" v-if="scope.row.children">
                            <el-checkbox-group v-model="scope.row.checked"
                                @change="(val) => itemChange(val, scope.row)">
                                <el-checkbox v-for="item of scope.row.children" :key="item.id" :label="item.id"
                                    :disabled="treeNode.typeCode == 'SUPER_MANAGER'">
                                    {{ item.resrName }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bot-button">
            <fix-bottom-button position="center">
                <el-button type="primary" @click="submitFun" :loading="loading"
                    :disabled="!treeNode.id || treeNode.nodeType == 'cate' || treeNode.typeCode == 'SUPER_MANAGER'">
                    保存
                </el-button>
                <el-button @click="getFuncAuth" :disabled="!treeNode.id || treeNode.nodeType == 'cate'">重置</el-button>
            </fix-bottom-button>
        </div>
    </div>
</template>

<script>
    import FixBottomButton from '@/components/FixBottomButton';
    import {
        getSysFunPermZtree,
        batchSaveRolePerm
    } from '../service.js';
    import {
        mapState
    } from 'vuex'
    export default {
        name: 'funcAuth', // 功能权限
        props: {
            treeNode: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        components: {
            FixBottomButton
        },
        data() {
            return {
                allCheck: false,
                tableData: [],
                loading: false,
                loading2: false,
            }
        },
        watch: {
            treeNode: {
                handler: function (node) {
                    if (node.id && node.nodeType != 'cate') {
                        this.getFuncAuth();
                    } else {
                        this.tableData = [];
                    }
                },
                immediate: true
            }
        },
        computed: {
            ...mapState({
                systemId: state => state.token.systemId
            })
        },
        methods: {
            getFuncAuth() {
                let params = {
                    userId: this.treeNode.id,
                    sysId: this.systemId
                }
                this.loading2 = true;
                getSysFunPermZtree(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data)) {
                            data = data.map(item => {
                                let children = item.children || [];
                                let checked = children.filter(item2 => item2.isCheck).map(item3 => item3
                                    .id);
                                let indeterminate = (checked.length > 0 && checked.length < children
                                    .length);
                                return {
                                    ...item,
                                    isCheck: item.isCheck,
                                    children: children,
                                    checked: checked,
                                    indeterminate: indeterminate,
                                }
                            })

                            this.tableData = [...data];
                            // 超级管理员  全选不可编辑
                            if (this.treeNode.typeCode == 'SUPER_MANAGER') {
                                this.allCheck = true;
                                this.allCheckChange(true);
                            }
                            this.checkIsAllCheck();
                        } else {
                            this.tableData = [];
                        }
                    }
                    this.loading2 = false;
                }).catch(error => {
                    this.loading2 = false;
                })
            },
            allCheckChange(val) { // 全选/全不选
                if (val) {
                    this.tableData.forEach(item => {
                        item.isCheck = true;
                        item.checked = item.children.map(item2 => item2.id);
                        item.indeterminate = false;
                        if (item.children) {
                            item.children.forEach(item3 => {
                                item3.isCheck = true;
                            })
                        }
                    })
                } else {
                    this.tableData.forEach(item => {
                        item.isCheck = false;
                        item.checked = [];
                        item.indeterminate = false;
                        if (item.children) {
                            item.children.forEach(item3 => {
                                item3.isCheck = false;
                            })
                        }
                    })
                }
            },
            moduleCheckChange(val, row) { // 应用 全选/全不选
                if (val) {
                    row.checked = row.children.map(item => item.id);
                    row.isCheck = true;
                    row.children.forEach(item2 => {
                        item2.isCheck = true
                    })
                } else {
                    row.isCheck = false;
                    row.checked = [];
                    row.children.forEach(item2 => {
                        item2.isCheck = false
                    })
                }
                row.indeterminate = false;
                this.checkIsAllCheck();
            },
            itemChange(val, row) {
                if (val) {
                    if (val.length == row.children.length) {
                        row.isCheck = true;
                        row.indeterminate = false;
                    } else {
                        row.isCheck = false;
                        if (row.checked.length > 0 && row.checked.length < row.children.length) {
                            row.indeterminate = true;
                        } else {
                            row.indeterminate = false;
                        }
                    }

                    row.children.forEach(item => {
                        let index = row.checked.findIndex(id => id == item.id);
                        if (index > -1) {
                            item.isCheck = true;
                        } else {
                            item.isCheck = false;
                        }
                    })
                }
                this.checkIsAllCheck();
            },
            checkIsAllCheck() { // 计算全选/全不选 状态
                for (let i = 0; i < this.tableData.length; i++) {
                    let item = this.tableData[i];
                    let itemChild = item.children || [];
                    this.allCheck = true;
                    if (!item.isCheck || itemChild.findIndex(child => child.isCheck == false) > -1) {
                        this.allCheck = false;
                        break;
                    }
                }
            },
            submitFun() {
                let funcPermList = [];
                this.tableData.forEach(item => {
                    let data = [...item.children];
                    if (item.checked.length || item.isCheck) {
                        data.push(item);
                    }
                    data.forEach(item2 => {
                        if (item2.isCheck || (item2.checked && item2.checked.length)) {
                            funcPermList.push({
                                id: item2.id,
                                resourceType: 'USER',
                                resourceId: this.treeNode.id,
                                resrId: item2.id,
                                resrCode: item2.resrCode,
                                resrName: item2.resrName,
                                logo: item2.logo,
                                parentId: item2.parentId,
                                urlType: item2.urlType,
                                url: item2.url,
                                systemCode: item2.systemCode,
                                moduCode: item2.moduCode,
                                resrTypeId: item2.resrTypeId,
                                typeSubId: item2.typeSubId,
                                orderNum: item2.orderNum,
                                isSetView: item2.isSetView,
                                isAuth: item2.isAuth,
                                authType: item2.authType,
                                opeType: item2.opeType,
                                crtDt: item2.crtDt,
                                crtId: item2.crtId,
                                crtName: item2.crtName,
                                crtDeptId: item2.crtDeptId,
                                tenementId: item2.tenementId,
                            })
                        }
                    })

                })
                let params = {
                    resourceType: 'USER',
                    resourceId: this.treeNode.id,
                    sysId: this.systemId,
                    funcPermList: JSON.stringify(funcPermList)
                }
                this.loading = true;
                batchSaveRolePerm(params).then(res => {
                    if (res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '保存成功'
                        })
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
                this.$emit('refresh');

            },
        }
    }

</script>

<style lang="scss" scoped>
    .func-auth {
        height: 500px;
        display: flex;
        flex-direction: column;

        .table-box {
            flex: 1;
            overflow: hidden;
        }

        .bot-button {
            height: 50px;
            position: relative;
            margin: 0;
        }
    }

</style>
